<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <!-- ie9不支持webSocket，得做一个升级浏览器的判断 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./less/css/public.css" />
  <link rel="stylesheet" href="./less/css/public-item.css" />
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  <style>
    .main .content {
      box-sizing: border-box;
      padding: 0 0.02rem;
      top: 1.85rem;
      width: 98%;
      height: 8.99rem;
      margin-left: 0.08rem;
      background-image: url('./img/item5/content-ranking.png');
      background-repeat: no-repeat;
      background-size: 100%;
    }

    .element-header {
      font-weight: 700;
      color: #666;
    }

    .tab {
      position: absolute;
      top: -0.59rem;
      margin-left: 1.94rem;
      text-align: center;
    }

    .active {
      background-color: #009688 !important;
      color: #fff !important;
      border: none !important;
    }

    #app {
      height: 7.6rem;
      padding: 0 0.1rem;
    }

    .el-input {
      width: 2.74rem;
      padding-left: 0.1rem;
    }

    .el-button {
      height: 0.4rem;
      margin-left: 0.3rem;
    }

    .el-pagination {
      text-align: center;
      padding: 0.07rem 0.07rem 0;
    }

    .searchBox {
      width: 100%;
      text-align: center;
    }

    .el-input__icon {
      margin-left: 0.1rem;
    }
  </style>
</head>

<body>
  <!-- logo -->
  <div class="logo" onclick="goPage('introductionPage')">
    <img src="./img/logo.png" alt="" />
  </div>
  <!-- 二维码 -->
  <div class="code">
    <div class="title">· 二维码 ·</div>
    <div class="qrCode">
      <img src="./img/QRcode.jpg" alt="" />
    </div>
  </div>
  <!-- 返回 -->
  <div class="back" onclick="backIndex()">
    <img src="./img/back.png" alt="" />
  </div>
  <!-- 主体内容 -->
  <div class="main">
    <div class="title">· 垃非排名 ·</div>
    <div class="content">
      <div id="app">
        <template>
          <div class="tab">
            <el-button round @click="rankingFn(0)" :class="rankParentTypeIndex === 0 ? 'active' : ''">农户综合排名</el-button>
            <el-button round @click="rankingFn(1)" :class="rankParentTypeIndex === 1 ? 'active' : ''">个人自查月度排名
            </el-button>
            <el-button round @click="rankingFn(2)" :class="rankParentTypeIndex === 2 ? 'active' : ''">个人被查月度排名
            </el-button>
          </div>
          <!-- 表格 有点击选中的样式 -->
          <el-table :stripe="true" :border="true" :fit="true" height="100%" header-row-class-name="element-header"
            :data="tableData" style="width: 100%">
            <el-table-column label="排名" prop="rank"> </el-table-column>
            <el-table-column label="农户姓名" prop="targetName">
            </el-table-column>
            <el-table-column label="所属村" prop="organName">
            </el-table-column>
            <el-table-column label="累计积分" prop="rankValue">
            </el-table-column>
            <tempalte v-if="rankParentTypeIndex === 0">
              <el-table-column label="投放准确率" prop="bak3">
              </el-table-column>
              <el-table-column label="投放率" prop="bak2"> </el-table-column>
              <el-table-column label="自查率" prop="bak1"> </el-table-column>
              <el-table-column label="监督次数" prop="bak4">
              </el-table-column>
            </tempalte>
            <tempalte v-if="rankParentTypeIndex === 1">
              <el-table-column label="自查总次数" prop="bak5">
              </el-table-column>
              <el-table-column label="自查不通过次数" prop="bak6">
              </el-table-column>
              <el-table-column label="自查不通过次数" prop="bak7">
              </el-table-column>
            </tempalte>
          </el-table>
          <!-- 分页 -->
          <div class="block">
            <el-pagination background :page-size="20" :total="totalRows" :current-page="pageNum"
              :page-sizes="[10,20,30,40,50,60,70,80,90]" layout="prev, pager, next, jumper, total, sizes"
              @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
            <div class="searchBox">
              <el-date-picker type="month" v-model="dateValue" placeholder="选择日期搜索" @change="selectDate">
              </el-date-picker>
              <el-input placeholder="请输入用户名" v-model="userName" clearable>
              </el-input>
              <el-button type="primary" @click="searchFn">搜索</el-button>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
  <!-- 三个库：jquery发请求vue+elementui实现功能 -->
  <!-- 引入的库太多，影响加载速度。不如直接用layui好 -->
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="./js/public.js"></script>
  <script src="./js/config.js"></script>
  <script src="./js/item5.js"></script>
</body>

</html>